<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Load Leaflet from CDN -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>

    <style>
        html, body, #map {
            margin:0; padding:0;  width : 100%; height : 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    var map = L.map('map').setView([45.528, -122.680], 13);
    L.esri.basemapLayer("Gray").addTo(map);

    var parks = L.esri.featureLayer({
        url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0",
        style: function () {
            return { color: "#70ca49", weight: 2 };
        }
    }).addTo(map);

    var popupTemplate = "<h3>{NAME}</h3>{ACRES} Acres<br><small>Property ID: {PROPERTYID}<small>";

    parks.bindPopup(function(e){
        return L.Util.template(popupTemplate, e.feature.properties)
    });
</script>
</body>
</html>
